<script setup>

import BlackTable from "@/components/table/BlackTable.vue";
import BlackCard from "@/components/card/BlackCard.vue";
import {onBeforeMount, reactive} from "vue";
import {getDataList} from "@/api/api.js";
import {tabFormat} from "@/utils/common.ts";
import router from "@/router/router.js";

const getMsg = (pageInfo) => {
  getDataList(pageInfo).then(res => {
    pageInfo.total = res.total;
    pageInfo.list = res.list;
  });
}

const formatter = (row, column, cellValue) => {
  return tabFormat(cellValue);
}
const backInfo = reactive({
  page: 1,
  size: 10,
  total: 0,
  list: [],
  type: 1
})
const foreInfo = reactive({
  page: 1,
  size: 10,
  total: 0,
  list: [],
  type: 2
})
const dataInfo = reactive({
  page: 1,
  size: 10,
  total: 0,
  list: [],
  type: 3
})
const otherInfo = reactive({
  page: 1,
  size: 10,
  total: 0,
  list: [],
  type: 4
})
onBeforeMount(() => {
  getMsg(backInfo);
  getMsg(foreInfo);
  getMsg(dataInfo);
  getMsg(otherInfo);
})

const goListPage = (pageInfo) => {
  router.push({path: '/data/list', query: {...pageInfo}})
}

const clickRow = (row) => {
  router.push({
    path: '/data/content',
    query: {...row}
  })
}
</script>

<template>
  <div class="view-container">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/data' }">菜市场</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="hor-container">
      <black-card id="back" title="公告" slot-type="button" :btn-method="goListPage" :method-param="backInfo">
        <black-table :page-info="backInfo" :query="getMsg" :click-row="clickRow">
          <el-table-column prop="type" label="类型" :formatter="formatter"></el-table-column>
          <el-table-column prop="title" label="标题" show-overflow-tooltip>
            <template #default="scope">
              <div style="text-decoration:none;cursor: pointer;">
                {{ scope.row.title }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="日期"></el-table-column>
        </black-table>
      </black-card>
      <black-card id="fore" title="活动" slot-type="button" :btn-method="goListPage" :method-param="foreInfo">
        <black-table :page-info="foreInfo" :query="getMsg" :click-row="clickRow">
          <el-table-column prop="type" label="类型" :formatter="formatter"></el-table-column>
          <el-table-column prop="title" label="标题" show-overflow-tooltip>
            <template #default="scope">
              <div style="text-decoration:none;cursor: pointer;">
                {{ scope.row.title }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="日期"></el-table-column>
        </black-table>
      </black-card>
    </div>
    <div class="hor-container">
      <black-card id="data" title="车店" slot-type="button" :btn-method="goListPage" :method-param="dataInfo">
        <black-table :page-info="dataInfo" :query="getMsg" :click-row="clickRow">
          <el-table-column prop="type" label="类型" :formatter="formatter"></el-table-column>
          <el-table-column prop="title" label="标题" show-overflow-tooltip>
            <template #default="scope">
              <div style="text-decoration:none;cursor: pointer;">
                {{ scope.row.title }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="日期"></el-table-column>
        </black-table>
      </black-card>
      <black-card id="other" title="其他" slot-type="button" :btn-method="goListPage" :method-param="otherInfo">
        <black-table :page-info="otherInfo" :query="getMsg" :click-row="clickRow">
          <el-table-column prop="type" label="类型" :formatter="formatter"></el-table-column>
          <el-table-column prop="title" label="标题" show-overflow-tooltip>
            <template #default="scope">
              <div style="text-decoration:none;cursor: pointer;">
                {{ scope.row.title }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="日期"></el-table-column>
        </black-table>
      </black-card>
    </div>
  </div>
</template>

<style scoped>
#back {
  width: 60%;
}

#fore {
  width: 40%;
}

#data {
  width: 60%;
}

#other {
  width: 40%;
}

/* 移动端适配 */
@media (max-width: 768px) {
  #back,
  #fore,
  #data,
  #other {
    width: 100%;
  }
  
  .el-breadcrumb {
    font-size: 12px;
  }
  
  .el-breadcrumb__item {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .el-breadcrumb {
    font-size: 10px;
  }
  
  .el-breadcrumb__item {
    font-size: 10px;
  }
}
</style>